<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-circle-progress :percent="percent"> </pure-circle-progress>
			</pj-demo>

			<!-- 自定义颜色 -->
			<pj-demo title="自定义颜色">
				<pure-flex wrap>
					<pure-circle-progress
						:percent="percent"
						activeColor="#ff9900"
					>
					</pure-circle-progress>

					<pure-circle-progress
						:percent="percent"
						activeColor="#18a058"
					>
					</pure-circle-progress>

					<pure-circle-progress
						:percent="percent"
						activeColor="#d03050"
					>
					</pure-circle-progress>
				</pure-flex>
			</pj-demo>

			<!-- 零进度点 -->
			<pj-demo title="零进度点">
				<pure-flex wrap>
					<pure-circle-progress
						:percent="percent"
						activeColor="#ff9900"
						zeroDot
					>
					</pure-circle-progress>

					<pure-circle-progress
						:percent="percent"
						activeColor="#18a058"
						zeroDot
					>
					</pure-circle-progress>

					<pure-circle-progress
						:percent="percent"
						activeColor="#d03050"
						zeroDot
					>
					</pure-circle-progress>
				</pure-flex>
			</pj-demo>

			<!-- 自定义大小 -->
			<pj-demo title="自定义大小">
				<pure-flex wrap>
					<pure-circle-progress
						:percent="percent"
						activeColor="#18a058"
						:size="size"
					>
					</pure-circle-progress>
				</pure-flex>
			</pj-demo>

			<!-- 进度文本 -->
			<pj-demo title="进度文本">
				<pure-flex wrap>
					<pure-circle-progress
						:percent="percent"
						activeColor="#18a058"
						pivot-text="自定义文本"
					>
					</pure-circle-progress>
				</pure-flex>
			</pj-demo>

			<view class="buttons">
				<pure-button
					theme="primary"
					@onClick="handleAdd"
					>增加</pure-button
				>
				<pure-button
					theme="danger"
					@onClick="handleSubtract"
					>减少</pure-button
				>
			</view>
		</view>

		<pure-gap size="50px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { onLoad, onReady, onShow } from "@dcloudio/uni-app";

	// 进度值
	const percent = ref(50);

	// 大小
	const size = ref("150px");

	// 增加进度
	const handleAdd = () => {
		percent.value = Math.min(percent.value + 25, 100);
	};

	// 减少进度
	const handleSubtract = () => {
		percent.value = Math.max(percent.value - 25, 0);
	};
</script>

<style lang="scss" scoped>
	.page {
		--page-layout-background: var(--pure-background-default);
		font-size: var(--pure-font-size-small);
	}

	.buttons {
		font-size: var(--pure-font-size-small);
		display: flex;
		flex-direction: row;
		gap: 6px;
	}
</style>
